<template>
  <div class="manage_page fillcontain">
    <div class="header_container">
      <img src="../assets/stu/icon_title.png" @click="goHome" style="cursor: pointer" />
      <el-dropdown @command="handleCommand" style="float: right;margin-right: 50px">
        <div style="margin-left: 15px;float:left;margin-top: 8px;margin-bottom: 6px"><img style="align-content: center; cursor: pointer;" src="../assets/stu/pic_title_user.png" height="32" width="32"/></div>
        <div style="float: left;vertical-align: middle;line-height: 50px;margin-left: 10px;">{{user.name}}</div>
        <!--<img src="../assets/stu/pic_title_user.png" style="cursor: pointer">-->
        <!--{{user}}-->
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="goProfile">个人资料</el-dropdown-item>
          <el-dropdown-item command="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!--<el-menu mode="horizontal" :default-active="defaultActive" router class="top-nav">-->
    <!--<el-menu-item index="/platform/myCenter">首页</el-menu-item>-->
    <!--<el-menu-item index="/platform/discussion">E问</el-menu-item>-->
    <!--</el-menu>-->
    <div class="top-nav">
      <ul>
        <li><div @click="goHome" style="cursor: pointer">首页</div></li>
        <li><div @click="goAsk" style="cursor: pointer">讨论区</div></li>
      </ul>
    </div>
    <div class="eAsk">
      <el-row :gutter="10">
        <el-tabs type="border-card">
          <el-tab-pane label="全部">
            <el-row :gutter="20"  v-for="discussion in discussionList" :key="discussion">
              <el-col :span="20" :offset="2">
                <el-card :body-style="{ padding: '0px' }">
                  <img src="../assets/bg_new.png" style="border-radius: 256px; width: 50px; height: 50px;float: left; margin-left: 5px; margin-top: 20px">
                  <div style="padding: 14px; float: left; margin-left: 10px">
                    <router-link :to="{path: '/platform/discussionDetail/'+ discussion.id}" style="cursor: pointer">{{ discussion.title }}</router-link>
                    <div class="bottom clearfix" style="padding-top: 10px">
                      <time class="time">{{discussion.user_name}}</time>
                      <time class="time">{{discussion.create_time | formatTime}}</time>
                      <el-button type="text" class="button">最后回复</el-button>
                    </div>
                  </div>
                  <div style="float: right">
                    <div style="float: right; margin-right: 15px; margin-top: 20px"><span>{{discussion.look_count}}</span><br/><span style="padding-top: 10px">查看</span></div>
                    <div style="float: right; margin-right: 15px; margin-top: 20px"><span>{{discussion.answer_count}}</span><br/><span style="padding-top: 10px">回复</span></div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 20px; text-align: center">
              <el-col :span="20" :offset="2">
              <el-pagination
                background
                layout="prev, pager, next"
                @current-change="handleCurrentChange"
                :total="count">
              </el-pagination>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="20" :offset="2">
              <el-button type="primary" @click="dialogFormVisible = true" style="margin-top: 20px; float: right; margin-right: 20px">发布</el-button>
              </el-col>
              <el-dialog title="发布评论" :visible.sync="dialogFormVisible">
                <el-form :model="formData" ref="formData" :label-width="formLabelWidth">
                  <el-form-item label="标题" prop="name" :label-width="formLabelWidth">
                    <el-input v-model="formData.name"></el-input>
                  </el-form-item>
                  <el-form-item label="描述" prop="requirement" :label-width="formLabelWidth">
                    <quillEditor v-model="formData.requirement" placeholder="请输入内容"></quillEditor>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="askPublish">确 定</el-button>
                </div>
              </el-dialog>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </div>
    <div class="foot">
      <div class="footer">
        <div style=" margin-top: 15px;float: left;">
          <img src="../assets/stu/icon_title.png"/>
          <div style="margin-top: 15px;width: 450px">
            <span style="width: 100px;color: #979797;font-size: 14px;text-align: left">物联网智慧实训平台是以物联网技术实训作为出发点，搭载E学堂教学信息化，为用户提供完整体系的物联网学习平台。</span>
          </div>
        </div>
        <div class="footer-copyright">
          <table>
            <tr>
              <td style="border:0;vertical-align:middle;height:25px;font-size:15px;color: #979797">©2016-2020
                北京新大陆时代教育科技有限公司 版权所有
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getClientUser, clientLogout, getAskList, postAskPublish, timeFormat} from '@/api/api'
  import { quillEditor } from 'vue-quill-editor'
  export default {
    data () {
      return {
        myUrl: '',
        user: '',
        userID: 0,
        count: 0,
        page: 1,
        createTime: '',
        discussionList: [],
        dialogFormVisible: false,
        formLabelWidth: '60px',
        formData: {
          name: '',
          requirement: ''
        }
      }
    },
    components: {
      quillEditor
    },
    computed: {
      defaultActive: function () {
        if (this.$route.path.indexOf('/learn') > 0) {
          return '/platform/myTask'
        }
        return this.$route.path
      }
    },
    filters: {
      formatTime (time) {
        return timeFormat(time)
      }
    },
    created () {
      this.initData()
      this.getAskLists()
    },
    methods: {
      goProfile () {
        this.$router.push({path: '/platform/profile'})
      },
      goHome () {
        this.$router.push({path: '/platform/myTask'})
      },
      goAsk () {
        this.$router.push({path: '/platform/discussion'})
      },
      logout () {
        clientLogout({username: this.user.username}).then(res => {
          this.$router.push({path: '/'})
        })
      },
      initData () {
        getClientUser().then(res => {
          if (res.status === 201) {
//            this.$router.push({path: '/'})
          } else {
            this.user = res.data
            this.userID = res.data.id
          }
        })
      },
      handleCommand (command) {
        switch (command) {
          case 'logout':
            this.logout()
            break
          case 'goProfile':
            this.goProfile()
            break
        }
      },
      getAskLists () {
        getAskList(this.page).then(res => {
          let data = res.data
          // debugger
          this.discussionList = data.results
          this.count = data.count
        }, res => {
          // alert(res)
        })
      },
      askPublish () {
        this.dialogFormVisible = false
        let formdata = {title: this.formData.name, content: this.formData.requirement, user: this.userID}
        formdata = JSON.stringify(formdata)
        postAskPublish(formdata).then(res => {
          this.discussionList.push(res.data)
        }, res => {
          alert(res.status)
        })
      },
      handleCurrentChange (val) {
        this.page = val
        this.getAskLists()
      }
    }
  }
</script>

<style scoped lang="less">
  .top-nav {
    height: 45px;
    background: #499aff;
    ul {
      margin-left: 50px;
      li {
        float: left;
        color: white;
        list-style:none;
        font-size: 18px;
        div {
          width: 100px;
          height: 100%;
          margin-top: 8px;
          margin-left: 50px;
          text-align: center;
        }
      }
    }
  }

  .header_container{
    background-color: white;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
    img {
      margin-left: 40px
    }
  }

  .foot {
    /*height: 20%;*/
    /*margin-top: 10px;*/
    /*position: absolute;*/
    /*bottom: 0;*/
    width: 100%;
    height: 186px;
    background: #e0e6ef;
  }

  .footer {
    position: relative;
    width: 1200px;
    left: 0;
    bottom: 0;
    margin: 0 auto;
  }
  .footer-copyright {;
    margin-right: 60px;
    float: right;
    margin-top: 100px;
    overflow: hidden;
    font-size: 15px;
    font-family: "微软雅黑";
    text-align: center;
  }
  .eAsk {
    display: block;
    width: 100%;
  }
  .time {
    font-size: 13px;
    color: #999;
    padding-right: 20px;
  }

</style>

